<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类(structural pseudo class)</title>
  <!-- 
    HTML的结构伪类（Structural Pseudo-classes）是一种CSS选择器，用于根据元素在文档中的位置或结构特征来选择元素。以下是关于HTML结构伪类的一些常见用法和示例： 
 
      1. :first-child  伪类(":"前不留空格)：选择作为父元素的第一个子元素的元素。例如： p:first-child { color: red; }  可以选择第一个段落元素并设置其文字颜色为红色。 
      2. :last-child  伪类(":"前不留空格)：选择作为父元素的最后一个子元素的元素。例如： li:last-child { font-weight: bold; }  可以选择最后一个列表项并设置其字体加粗。 
      3. :nth-child(n)  伪类(":"前不留空格)：选择作为父元素的第n个子元素的元素。可以使用具体的数字、表达式或关键词来选择特定位置的子元素。
          例如： div:nth-child(odd) { background-color: lightgray; }  可以选择奇数位置的div元素并设置背景颜色为浅灰色。 
      4. :nth-of-type(n)  伪类(":"前不留空格)：选择作为父元素的特定类型的第n个子元素的元素。与 :nth-child 类似，但只考虑特定类型的元素。
          例如： ul li:nth-of-type(2n) { color: blue; }  可以选择每隔两个的列表项并设置文字颜色为蓝色。 
      5. :not(selector)  伪类(":"前留空格)：排除满足特定选择器条件的元素。例如： p:not(.intro) { font-style: italic; }  可以选择除了class为intro的段落元素并设置斜体样式。 
      6. :first-of-type  伪类(":"前不留空格)：选择作为父元素的第一个特定类型的子元素的元素。例如： h1:first-of-type { font-size: 24px; }  可以选择第一个标题元素并设置字体大小为24px。
      7. :last-of-type  伪类(":"前不留空格)：选择作为父元素的最后一个特定类型的子元素的元素。例如： p:last-of-type { text-decoration: underline; }  可以选择最后一个段落元素并设置下划线样式。
   -->
   <style>
     /* first-last-child */
     ol li:first-child {
       font-weight: bold;
       color: red;
     }

     ol li:last-child {
       font-weight: bold;
       color: blue;
     }

     /* nth-child */
     ul li:nth-child(2) {
       color: green;
     }

     /* n: 2n, 4n, 6n, ... */
     ul li:nth-child(3n) {
       color: salmon;
     }

     ul li:nth-child(4n + 1) {
       color: blueviolet;
     }

     /* 前n个 */
     ul > li:nth-child(-n + 5) {
       color: chocolate;
     }

     /* nth-last-child: 倒数n个 */
     .nth-last-child dd:nth-last-child(5) {
       color: blueviolet;
     }

     /* 共倒数后n个 */
     .nth-last-child dd:nth-last-child(-n + 3) {
       color: chocolate;
     }

     /* nth-of-type: 特定类型的第n个子元素 */
     .nth-of-type div:nth-of-type(2) {
       color: skyblue;
     }

     .nth-of-type span:nth-of-type(2n) {
       font-weight: bold;
       color: saddlebrown;
     }

     .nth-of-type p :nth-of-type(2n + 1) {
       color: purple;
     }

     /* :not(selector): 排除满足特定选择器条件的元素, 注意":not"之前留空格 */
     .not :not(.item-not) {
       color: plum;
     }

     /* first-of-type: 第一个特定类型的子元素 */
     .first-last-of-type:first-of-type {
       color: red;
     }

     /* last-of-type: 后一个特定类型的子元素 */
     .first-last-of-type:last-of-type {
       color: blue;
     }

   </style>
</head>
<body>

  <ol class="first-last-child">
    <li>first-child</li>
    <li>second-child</li>
    <li>last-child</li>
  </ol>
  <div>---------------------------------</div>

  <ul class="nth-child">
    <li>structural-pseudo-class1</li>
    <li>structural-pseudo-class2</li>
    <li>structural-pseudo-class3</li>
    <li>structural-pseudo-class4</li>
    <li>structural-pseudo-class5</li>
    <li>structural-pseudo-class6</li>
    <li>structural-pseudo-class7</li>
    <li>structural-pseudo-class8</li>
    <li>structural-pseudo-class9</li>
    <li>structural-pseudo-class10</li>
  </ul>
  <div>---------------------------------</div>

  <dl class="nth-last-child">
    <dd>nth-last-child1</dd>
    <dd>nth-last-child2</dd>
    <dd>nth-last-child3</dd>
    <dd>nth-last-child4</dd>
    <dd>nth-last-child5</dd>
    <dd>nth-last-child6</dd>
  </dl>
  <div>---------------------------------</div>

  <div class="nth-of-type">
    <div>nth-of-type-div1</div>
    <span>nth-of-type-span1</span>
    <span>nth-of-type-span2</span>
    <span>nth-of-type-span3</span>
    <span>nth-of-type-span4</span>
    <div>nth-of-type-div2</div>
    <div>nth-of-type-div3</div>
    <div>nth-of-type-div4</div>
  </div>
  <div>---------------------------------</div>

  <div class="not">
    <div class="item">not-item1</div>
    <div class="item">not-item2</div>
    <div class="item-not">not-item3</div>
    <div class="item">not-item4</div>
    <span>not-span1</span>
    <span>not-span2</span>
  </div>

  <div>---------------------------------</div>

  <div class="first-last-of-type">
    <div class="item">not-item1</div>
    <div class="item">not-item2</div>
    <div class="item">not-item3</div>
    <div class="item">not-item4</div>
    <span>not-span1</span>
    <span>not-span2</span>
  </div>
  
</body>
</html>